import { ChartBarDecreasingIcon } from "lucide-react";
import {
  Bar,
  BarChart,
  Cell,
  LabelList,
  ResponsiveContainer,
  XAxis,
  YAxis,
} from "recharts";

const data = [
  { issue: "Bug", rate: 30, color: "--chart-1" },
  { issue: "Script", rate: 40, color: "--chart-2" },
  { issue: "Env", rate: 20, color: "--chart-3" },
  { issue: "Undo", rate: 10, color: "--chart-4" },
];

export function IssueSummary() {
  return (
    <div className="flex h-full flex-col rounded-lg border bg-card text-card-foreground shadow-sm">
      <div className="flex items-center justify-between border-b px-4 py-2">
        <div className="flex items-center gap-2 text-sm">
          <ChartBarDecreasingIcon className="size-4 text-primary" />
          <span className="font-semibold">Summary</span>
        </div>
      </div>
      <div className="h-full p-4">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            accessibilityLayer
            data={data}
            layout="vertical"
            barCategoryGap={8}
            margin={{
              top: -6,
              right: 40,
              bottom: -6,
            }}
          >
            <YAxis
              dataKey="issue"
              type="category"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
              hide
            />
            <XAxis dataKey="rate" type="number" hide />

            <Bar dataKey="rate" radius={0}>
              {data.map((entry) => (
                <Cell key={entry.issue} fill={`var(${entry.color})`} />
              ))}

              <LabelList
                dataKey="issue"
                position="insideLeft"
                offset={8}
                style={{ fill: "var(--primary-foreground)" }}
                fontSize={12}
              />
              <LabelList
                dataKey="rate"
                position="right"
                offset={8}
                style={{ fill: "var(--primary)" }}
                fontSize={12}
                formatter={(value: number) => `${value} %`}
              />
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}
